<template>
    <div class="clientpond">
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="团队管理" title="排行榜"></crumbs>
        </div>
        <div class="paddingbox">
            <div class="contentbox">
                <div class="rankinglistleft">
                    <div class="water-print1"></div>
                    <div class="topformbox">
                        <div class="flexcenterbox">
                            <img src="../../assets/image/zyj.png" alt="" style="margin-right: 5px;">
                            总业绩
                        </div>
                        <div class="form">
                            <div class="lablecontent flexcenterbox">
                                <el-date-picker v-model="dateone" :clearable="false" @change="changedateone"
                                    value-format="YYYY-MM" type="month" placeholder="请选择" />
                                <img src="../../assets/image/down.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="basemsg">
                        <div class="msgitem">
                            <div class="lable">客户：</div>
                            <div class="lablecontent lablecontentonw">{{ leftkh }}</div>
                        </div>
                        <div class="msgitem">
                            <div class="lable">签单：</div>
                            <div class="lablecontent lablecontentonw">{{ leftqd }}</div>
                        </div>
                        <div class="msgitem">
                            <div class="lable">总业绩：</div>
                            <div class="lablecontent lablecontentonw">{{ leftzyj }}</div>
                        </div>
                    </div>
                    <div class="tabletop">
                        <div>排序</div>
                        <div>姓名</div>
                        <div>所属分组</div>
                        <div>总业绩</div>
                    </div>
                    <div style="height:600px;overflow:auto; position: relative; z-index: 100;">
                        <div class="tablecontent" v-for="(ele, index) in lefttabledate" :key="index">
                            <div class="div"><span
                                    :class="{ one: index === 0, two: index === 1, three: index === 2, four: index === 3, any: true }">{{
                                        index
                                        + 1 }}</span></div>
                            <div class="div headbox"><img style="width: 32px;height: 32px;border-radius: 4px;"
                                    crossorigin="anonymous" :src="ele.salesHeadURL" alt="">{{ ele.saleName }}</div>
                            <div class="div">{{ ele.deptName }}</div>
                            <div class="pricecolor div">¥{{ ele.totalPerformance }}</div>
                        </div>
                    </div>
                </div>
                <div class="rankinglistright">
                    <div class="water-print1"></div>
                    <div class="topformbox">
                        <div class="flexcenterbox">
                            <img src="../../assets/image/xzbf.png" alt="" style="margin-right: 5px;">
                            新增保费
                        </div>
                        <div class="form">
                            <div class="lablecontent flexcenterbox">
                                <el-date-picker v-model="datetwo" :clearable="false" @change="changedatetwo"
                                    value-format="YYYY-MM" type="month" placeholder="请选择" />
                                <img src="../../assets/image/down.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="basemsg">
                        <div class="msgitem">
                            <div class="lable">客户：</div>
                            <div class="lablecontent lablecontenttwo">{{ rightkh }}</div>
                        </div>
                        <div class="msgitem">
                            <div class="lable">签单：</div>
                            <div class="lablecontent lablecontenttwo">{{ rightqd }} </div>
                        </div>
                        <div class="msgitem">
                            <div class="lable">总业绩：</div>
                            <div class="lablecontent lablecontenttwo">{{ rightzyj }}</div>
                        </div>
                    </div>
                    <div class="tabletop">
                        <div>排序</div>
                        <div>姓名</div>
                        <div>所属分组</div>
                        <div>总业绩</div>
                    </div>
                    <div style="height:600px;overflow:auto; position: relative; z-index: 100;">
                        <div class="tablecontent" v-for="(ele, index) in righttabledate" :key="index">
                            <div class="div"><span
                                    :class="{ one: index === 0, two: index === 1, three: index === 2, four: index === 3, any: true }">{{
                                        index
                                        + 1 }}</span></div>
                            <div class="div headbox"><img style="width: 32px;height: 32px;border-radius: 4px;"
                                    crossorigin="anonymous" :src="ele.salesHeadURL" alt="">{{ ele.saleName }}</div>
                            <div class="div">{{ ele.deptName }}</div>
                            <div class="pricecolor div">¥{{ ele.totalPerformance }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import crumbs from '../../components/crumbs.vue'
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getqueryrankinglistallapi, getqueryrankinglistinsurapi } from '../../api/api'
const router = useRouter()
const route = useRoute()
const datetwo = ref('')
const dateone = ref('')
onMounted(() => {
    const m =
        new Date().getMonth() + 1 >= 10
            ? new Date().getMonth() + 1
            : `0${new Date().getMonth() + 1}`
    const y = new Date().getFullYear()
    datetwo.value = y + '-' + m
    dateone.value = y + '-' + m
    getqueryrankinglistall()
    getqueryrankinglistinsur()
})
const getqueryrankinglistall = () => {
    getqueryrankinglistallapi({ month: dateone.value }).then((res: any) => {
        console.log(res, '总业绩排行榜')
        lefttabledate.value = res.list
        leftkh.value = res.customers
        leftqd.value = res.dealCount
        leftzyj.value = res.totalPerformance
    })
}
const leftkh = ref(0)
const leftqd = ref(0)
const leftzyj = ref(0)
const getqueryrankinglistinsur = () => {
    getqueryrankinglistinsurapi({ month: datetwo.value }).then((res: any) => {
        console.log(res, '长期保进步榜排行榜')
        righttabledate.value = res.list
        rightkh.value = res.customers
        rightqd.value = res.dealCount
        rightzyj.value = res.totalPerformance
    })
}
const rightkh = ref(0)
const rightqd = ref(0)
const rightzyj = ref(0)
const lefttabledate = ref<any>([])
const righttabledate = ref<any>([])
const changedateone = (val: any) => {
    getqueryrankinglistall()
}
const changedatetwo = (val: any) => {
    getqueryrankinglistinsur()
}

const back = () => {
    window.history.back()
}

const curName = ref('')
if (sessionStorage.getItem('name')) {
    curName.value = `url("data:image/svg+xml,%3Csvg width='110' height='110' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='12' fill-opacity='0.1' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'%3E${sessionStorage.getItem('name')}%3C/text%3E%3C/svg%3E")`
}

</script>
<style lang="scss" scoped>
.paddingbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;

    .contentbox {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        min-height: 400px;

        .tabletop {
            margin-top: 25px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 14px;
            color: #3D3D3D;
            font-weight: 600;
            background-color: #FAFAFC;
            padding: 12px 0;
            border-top: 1px solid #F4F4F7;
            border-bottom: 1px solid #F4F4F7;

            div {
                width: 100px;
                text-align: start;
            }
        }

        .tablecontent {
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 14px;
            color: #3D3D3D;
            padding: 12px 0;
            border-bottom: 1px solid #F4F4F7;

            .div {
                width: 100px;
            }
        }

        .basemsg {
            font-weight: 600;
            margin-top: 20px;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #3D3D3D;

            .msgitem {
                display: flex;
                align-items: center;
                margin-right: 50px;
                color: #9497B1;

                .lablecontentonw {
                    color: #3E5FF5;
                }

                .lablecontenttwo {
                    color: #FFA814;
                }
            }
        }

        .rankinglistleft {
            background: linear-gradient(183deg, #EEF3FE 1%, #FFFFFF 13%, #FFFFFF 90%);
            flex: 1;
            flex-shrink: 0;
            margin-right: 35px;
            border-radius: 8px;
            box-sizing: border-box;
            padding: 24px;
            background-color: #ffffff;
            position: relative;
            .topformbox {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                color: #3D3D3D;
                font-weight: 600;

                .form {
                    display: flex;
                    align-items: center;

                    .lable {
                        margin-right: 8px;
                    }
                }
            }
        }

        .rankinglistright {
            flex: 1;
            flex-shrink: 0;
            border-radius: 8px;
            box-sizing: border-box;
            padding: 24px;
            background-color: #ffffff;
            background: linear-gradient(183deg, #FDF2E9 1%, #FFFFFF 13%, #FFFFFF 90%);
            position: relative;

            .topformbox {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                color: #3D3D3D;
                font-weight: 600;

                .form {
                    display: flex;
                    align-items: center;

                    .lable {
                        margin-right: 8px;
                    }
                }
            }
        }
    }
}

.top {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 24px;
    background-color: #ffffff;
    font-size: 16px;
    color: #9497B1;
}

.pricecolor {
    color: #FF7642;
}

::v-deep(.el-input__wrapper) {
    width: 100px;
    background-color: rgb(85 0 0 / 0%);
    border: noen;
    box-shadow: none;
    cursor: pointer;
}

::v-deep(.el-input__inner) {
    cursor: pointer;
}

::v-deep(.el-input) {
    width: 100px;
    cursor: pointer;
}

.one {
    color: #FFFFFF !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 14px;
    text-align: center !important;
    line-height: 24px;
    background-color: #FC2A42;
    border-radius: 50%;
}

.two {
    color: #FFFFFF !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 14px;
    text-align: center !important;
    line-height: 24px;
    background-color: #FF7642;
    border-radius: 50%;
}

.three {
    color: #FFFFFF !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 14px;
    text-align: center !important;
    line-height: 24px;
    background-color: #FFA814;
    border-radius: 50%;
}

.four {
    color: #FFFFFF !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 14px;
    text-align: center !important;
    line-height: 24px;
    background-color: #9497B1;
    border-radius: 50%;
}

.any {
    display: block;
    color: #9497B1;
    width: 24px !important;
    height: 24px !important;
    font-size: 14px;
    text-align: center !important;
    line-height: 24px;
    border-radius: 50%;
}

.headbox {
    display: flex;
    align-items: center;

    img {
        margin-right: 6px;
    }
}

.water-print {
    --curName: v-bind(curName);
    background: var(--curName) !important;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
</style>